//点击编辑按钮
let argStr = location.search;
let id = argStr.substr(4);
if(id) {
    detailArtAPI(id,res => {
        //铺设到页面上
        layui.form.val("edit",res.data.data);
        //下拉菜单的选择问题
        layui.form.render("select","edit");
        //让裁剪插件页替换一下
        cropper.replace(res.data.data.cover_img)
    })
}

//获取所有分类-铺设下拉菜单
acateListAPI({},res =>{
    let arr = res.data.data;
    arr.forEach(obj => {
        var theOption = `<option value="${obj.Id}" lay-verify="cate">${obj.name}</option>`;
        $("select[name=cate_id]").append(theOption);
        //让layui刷新一下表单
        layui.form.render('select','edit');
    })
})

//集成富文本编辑器
function initTinyMce() {
    tinymce.init({
        selector : 'textarea[name=content]',
        language : 'zh_CN',
        plugins : ['link','table','image'],
    });
}
initTinyMce();

//背景图片
let cropper;
function initcropper() {
    const image = document.getElementById('image');
    cropper = new Cropper(image, {
    aspectRatio: 1,//横纵比例
  //   crop(event) {
  //     console.log(event.detail.x);
  //     console.log(event.detail.y);
  //     console.log(event.detail.width);
  //     console.log(event.detail.height);
  //     console.log(event.detail.rotate);
  //     console.log(event.detail.scaleX);
  //     console.log(event.detail.scaleY);
  //   },
    preview:$(".img-preview")
  });
}
initcropper();

  
//点击按钮，让其他按钮出发事件
$(".select").on("click",function(e){
    $("#file").click();//点击选择，让文件触发点击事件
})  

//选择文件窗口出现，会触发change事件
$("#file").on("change",function(e){
    var url = URL.createObjectURL(this.files[0]);//将src转化成url
    cropper.replace(url);//cropper重新设置图片url地址以及重新构建cropper
})



//发布文章
$(".layui-form").on("submit",e => {
    e.preventDefault();
    //富文本里的东西取出来
    var htmlStr = tinyMCE.activeEditor.getContent();
    //封面图片剪裁区提取出来
    var canvas = cropper.getCroppedCanvas({
        width : 100,
        height : 100
    })
    //后台要的FormData类型
    let fd = new FormData($(".layui-form")[0]);
    fd.set("content",htmlStr);

    //把canvas -> File（Blob）文件对象（异步任务）
    canvas.toBlob(function(blobObj) {
        fd.append("cover_img",blobObj);

        if(id) {
            fd.append("Id",id)
            updataArtAPI(fd,res => {
                setTimeout(() => {
                    window.location.href = '../list/list.html';
                },1500)
            })
        }else {
            //发布文章接口
            addArtAPI(fd,res => {
                setTimeout(() => {
                    window.location.href = '../list/list.html';
                },1500)
            })
        }
        
    })
})